<template>
    <el-dialog title="会员卡管理" :visible.sync="value" width="80%" :before-close="handleClose" top="20px" :modal="true" :close-on-click-modal="false">

        <!-- <div class="card-info" v-if="current" > -->
        <div class="card-info" >
            <table class="el-table bw-table">
                <tr>
                    <td>卡号:</td><th>{{current.card_sn}}</th>
                    <td>姓名:</td><th>{{current.name}}</th>
                    <td>手机号:</td><th>{{current.mobile}}</th>
                </tr>
                <tr>
                    <td>余额:</td>
                    <th v-if="!isEdit" style="color: red;" class="text-price">
                        <!-- <count-to  :start-val="0" :end-val="" :duration="3000" class="card-panel-num"  />
                        <i class="el-icon-edit"  @click="onModify"></i> -->
                        {{current.money}}
                    </th>
                    <th v-if="isEdit">
                        <el-input v-model="money" style="width: 100px;" @blur="onUpdate"></el-input>
                    </th>
                    <td>积分:</td><th style="color: red;">{{current.score}}</th>
                    <td>性别:</td><th>{{cardSex}}</th>
                </tr>
                <tr>
                    <td>备注:</td><th colspan="3">{{current.remark}}</th>
                </tr>
            </table>
            <el-divider direction="vertical" content-position="center" style="height: 80px;"></el-divider>
            <!-- <div class="mini-info" v-if="current.member">
                <el-avatar :size="80" :src="current.member.avatar"></el-avatar>
                <div class="alias">
                    <span class="nickname">{{current.member.nickname}}</span>
                    <span>关注时间:{{current.member.subscribed_at}}</span>
                </div>
            </div> -->
        </div>

        <el-tabs type="border-card" v-model="active" @tab-click="onTabClick">
            <el-tab-pane name="deposit"><span slot="label"><i class="el-icon-apple"></i> 充值</span>
                <deposit></deposit>
            </el-tab-pane>
            <el-tab-pane name="charging"><span slot="label"><i class="el-icon-cherry"></i> 扣费</span>
                <charging></charging>
            </el-tab-pane>
            <el-tab-pane name="transfer"><span slot="label"><i class="el-icon-watermelon"></i> 转账</span>
                <transfer></transfer>
            </el-tab-pane>

            <!-- <el-tab-pane v-if="$setting['run_mode']>0" name="account"><span slot="label"><i class="el-icon-grape"></i> 明细</span>
                <account ref="accounts"></account>
            </el-tab-pane> -->
        </el-tabs>
    </el-dialog>
</template>

<script>
    import Charging from './Charging'
    import Deposit from './Deposit'
    import Transfer from './Transfer'
    import Account from './Account'
    import {mapState} from "vuex";
    import CountTo from 'vue-count-to'

    export default {
        name: "ChangeAccount",
        components:{
            Charging,Deposit,Transfer,Account,CountTo
        },
        props: {
            value: {
                type: Boolean,
                default: false
            },
            current: {
                type: Object,
                default() {
                    return {
                        card_sn: '11',
                        name: '111',
                        mobile: '111',
                        money: '111',
                        score: '111',
                        remark: '111'
                    }
                }
            }
        },
        computed: {
            ...mapState({
                // current: state => state.card.current,
            }),
            countMoney(){
                // if(this.current){
                //     return parseInt(this.current.money)
                // }
            },
            cardSex(){
                // if(this.current){
                //     let arr = ['未知','男','女']
                //     return arr[this.current.sex]
                // }
            }
        },
        data() {
           return{
               active:'deposit',
               isEdit:false,
               money:'',
            //    current: {
            //         card_sn: '11',
            //         name: '111',
            //         mobile: '111',
            //         money: '111',
            //         score: '111',
            //         remark: '111'
            //     }
           }
        },
        methods: {
            onModify(){

                // this.isEdit = true
                // this.money = this.countMoney
                console.log('123')
            },
            onUpdate(){
                this.isEdit = false
                // let id = this.current.id;
                // this.$http.put('/api/member-cards/'+id,{money:this.money}).then(ret=>{
                //     this.$store.dispatch('card/selectCard',ret.data)
                // })
            },
            handleClose() {
                this.$emit('input',false)
                // this.$emit('onRefresh')
                this.active = 'deposit'
            },
            onTabClick(val){
                console.log(val.name)
                if(val.name === 'account'){
                    this.$refs['accounts'].initData();
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .card-info{
        display: flex;
        .el-divider{
            height: 80px;
        }
        .bw-table{
            th{
                border: none;
            }
            td{
                border: none;
            }
            .card-panel-num{
                font-size: 18px;
                color: red;
            }
        }
        .mini-info{
            width: 30%;
            display: flex;
            box-sizing: border-box;
            padding-left: 10px;
            justify-items: center;
            .alias{
                display: flex;
                flex-direction: column;
                justify-content: center;
                height: 80px;
                box-sizing: border-box;
                padding: 10px;
                span{
                    line-height: 30px;
                }
                .nickname{

                }
            }
        }
    }

</style>